import React, { Component } from 'react'
import { connect } from 'react-redux'
import actionCreator from './actionCreator'
// const {Provider, Consumer} = context
import { Button } from 'antd'
import Hoc from '@/components/Hoc'

let mapState = (state, ownProps) => {//省略大括号和return,返回一个对象
  //1.store中的变量
  //2.类似于计算属性
  // console.log(state, ownProps)
  return {
    num: state.get('test').get('num'),
    numText: state.get('test').get('num') > 18 ? '先生或女士' : '小朋友'
  }
}
let mapDispatch = (dispatch, ownProps) => {
  // console.log(ownProps)//1.拿到父组件给这个组件传递的props
  return {
    //对象里面包含很多方法
    //2.这里可以改名
    //3.写逻辑控制派发时机
    inc1(payload) {//function可以省略
      dispatch(actionCreator.testIncAction(payload))
    }
  }
}



/**
 * 写了一个装饰器: 其他所有高阶组件必须都写成装饰器,有顺序的写在前面
 *   而且必须最后面导出组件,不能直接在组件前面导出
 */
@Hoc({ id: 8 })//覆盖
@connect(mapState, mapDispatch)

class Test extends Component {
  constructor(props) {
    super(props)
    this.state = {

    }
    // console.log(props)
  }
  componentDidMount() {

  }
  render() {
    const { num, numText, inc1 } = this.props
    return (
      <div>
        <p>Test 组件</p>
        <p>store的num: {num} | {numText}</p>
        <Button type="primary" onClick={inc1.bind(this, -1)}>Test-减</Button>
        <Button type="primary" onClick={inc1.bind(this, 1)}>Test-加</Button>
      </div>
    )
  }
}


export default Test
// export default connect((state)=>{
//   console.log(state);
//   return state;
// })(Test)
